<!DOCTYPE html>
<html>
    <head>
        <title> </title>
        <script src="http://cdn.bootcss.com/jquery/1.9.1/jquery.min.js"></script>
        <script type="text/javascript" src="./jtopo-0.4.8-min.js"></script>
        <script type="text/javascript" src="./toolbar.js"></script>
        <script type="text/javascript">
          $(document).ready(function(){                    
            var canvas = document.getElementById('canvas');            
            var stage = new JTopo.Stage(canvas);
            //显示工具栏
            showJTopoToobar(stage);
            var scene = new JTopo.Scene(stage);
            scene.background = './bg.jpg';
            
            var msgNode = new JTopo.TextNode("双击编辑文字, 点击节点可连线(连个节点)");
            msgNode.zIndex++;
            msgNode.setBound(250, 50);
            scene.add(msgNode);
            
            // 随机生成5个节点
            for(var i=0; i<5; i++){
                var node = new JTopo.Node('Node_' + i);
                node.setLocation(Math.random() * 600, Math.random() * 400);
                scene.add(node);        
            }
                                                    
            // var currentLink = null;
            var beginNode = null;
            var tempNodeA = new JTopo.Node('tempA');
            tempNodeA.setSize(1, 1);
            
            var tempNodeZ = new JTopo.Node('tempZ');
            tempNodeZ.setSize(1, 1);
            
            var link = new JTopo.Link(tempNodeA, tempNodeZ);
            
            // 松开 - 连线
            scene.mouseup(function(e){
                if(e.button == 2){
                    scene.remove(link);
                    return;
                }
                if(e.target != null && e.target instanceof JTopo.Node){
                    if(beginNode == null){
                        // 线条在一个节点上
                        beginNode = e.target;
                        scene.add(link);
                        // currentLink = this;
                        tempNodeA.setLocation(e.x, e.y);
                        tempNodeZ.setLocation(e.x, e.y);
                    }else if(beginNode !== e.target){
                        // 线条在两个不同的节点上
                        var endNode = e.target;
                        var l = new JTopo.Link(beginNode, endNode);
                        scene.add(l);
                        // currentLink = this;
                        beginNode = null;
                        scene.remove(link);
                    }else{
                        beginNode = null;
                    }
                }else{
                    scene.remove(link);
                }
            });
            // 按下
            scene.mousedown(function(e){
                if(e.target == null || e.target === beginNode || e.target === link){
                    scene.remove(link);
                }
            });
            scene.mousemove(function(e){
                tempNodeZ.setLocation(e.x, e.y);
            });
            
            var textfield = $("#jtopo_textfield");
            // 双击编辑文字
            scene.dbclick(function(event){
                if(event.target == null) return;
                var e = event.target;
                textfield.css({
                    top: event.pageY,
                    left: event.pageX - e.width/2
                }).show().val(e.text).focus().select();
                e.text = "";
                textfield[0].JTopoNode = e;
            });
            // 失去焦点
            $("#jtopo_textfield").blur(function(){
                textfield[0].JTopoNode.text = textfield.hide().val();
            });
        });
        </script>
    </head>
    <body>
        <div id="content">
          <canvas id="canvas" width="910" height="600"></canvas>
          <textarea id="jtopo_textfield" style="position: absolute;display: none;"></textarea>
        </div>
    </body>
</html>